<template>
    <div class="content">
        <div class="row">
            <div class="col-md-3">
                <div class="form-group">
                    <label class="col-sm-4 control-label">事件原因：</label>
                    <div class="col-sm-8">
                        <select
                            class="form-control select2"
                            style="width: 100%;color: #333 !important;"
                            v-model="materialData.orderReason"
                        >
                            <option
                                value=""
                                disabled
                                selected
                                style='display:none;'
                            >请选择</option>
                            <option
                                v-for="lst in selOrderReasonData"
                                :value="lst.name"
                                :key="lst.value"
                            >{{lst.name}}</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class=" col-md-3">

            </div>
            <div
                class="col-md-1"
                style="padding:0;font-weight:700"
            >
                当前环节：
            </div>
            <div class="col-md-5">
                确认
            </div>
        </div>
        <div class="row">
            <div
                class="col-md-1"
                style="padding:0;font-weight:700"
            >
                确认人：
            </div>
            <div class="col-md-5">
                {{materialData.materialPerson}}
            </div>
            <div
                class="col-md-1"
                style="padding:0;font-weight:700"
            >
                时间：
            </div>
            <div class="col-md-5">
                {{getDate()}}
            </div>
        </div>
        <div class="row">
            <div
                class="col-md-1"
                style="padding:0;font-weight:700"
            >
                签到时间：
            </div>
            <div class=" col-md-2">
                <input
                    type="text"
                    style="border-radius: 5px;"
                    class="form-control pull-right"
                    id="datepicker1"
                    @mousedown="selectDate1"
                    placeholder="YYYY-MM-DD"
                    v-model="materialData.time"
                >
            </div>
            <div class="col-md-3">
                <div class="form-group">
                    <span
                        class="error"
                        :style="{visibility: (check.time && !materialData.time) ? 'visible' : 'hidden'}"
                    >
                        <!-- <span class="error" style="visibility:visible"> -->

                        <i
                            class="fa fa-times-circle"
                            aria-hidden="true"
                        ></i> 请选择签到时间</span>
                </div>
            </div>
            <div
                class="col-md-1"
                style="padding:0;font-weight:700"
            >
                签到位置：
            </div>

            <div class="col-sm-5 formOrder">
                <div
                    @click="showMap"
                    style="cursor: pointer;width:50px;display:inline-block"
                >
                    <i
                        class="fa fa-map"
                        aria-hidden="true"
                        style="margin-top:10px;"
                    ></i>
                </div>
                X:{{this.materialData.orderX}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Y:{{this.materialData.orderY}}

            </div>
        </div>
        <div class="row">
            <div
                class="col-md-1"
                style="padding:0;font-weight:700"
            >
                描述：
            </div>
            <div class="col-md-9">
                <textarea
                    class="form-control"
                    rows="3"
                    placeholder="Enter ..."
                    v-model="materialData.materialDesc"
                    maxlength="80"
                ></textarea>
            </div>
        </div>
        <div class="row">
            <div
                class="col-md-1"
                style="padding:0;font-weight:700"
            >
            </div>
            <div class="col-md-9">
                <input
                    type="checkbox"
                    name=""
                    id=""
                    :checked="isChecked"
                    @change="changeCheck"
                >需要机械开挖
            </div>
        </div>
        <div class="row">
            <div class="form-group">
                <label
                    class="col-sm-1 control-label"
                    style="padding:0;font-weight:700;text-align:right"
                >上传照片：</label>
                <div
                    class="col-sm-11"
                    :class="{hiddenIcon: fileList.length>2}"
                >
                    <el-upload
                        :action="uploadUrl"
                        :file-list="fileList"
                        list-type="picture-card"
                        :on-success='handleSuccess'
                        :on-preview="handlePictureCardPreview"
                        :on-remove="handleRemove"
                    >
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                        <img
                            width="100%"
                            :src="dialogImageUrl"
                            alt=""
                        >
                    </el-dialog>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-1">
                填写领料单：
            </div>
            <div class="col-md-9">
                <div class="box-body">
                    <table
                        class="table-hover"
                        border="1"
                    >
                        <thead>
                            <tr class="title">
                                <th style="width:16%;">物料名称</th>
                                <th style="width:16%;">规格参数</th>
                                <th style="width:16%;">领料数量</th>
                                <th style="width:16%;">单位</th>
                                <th style="width:16%;">备注</th>
                                <th style="width:16%;">操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr
                                v-for="(item,index) in materialforms"
                                :key="item.value"
                            >
                                <td><input
                                        type="text"
                                        name=""
                                        id=""
                                        placeholder="单行输入"
                                        v-model="materialforms[index].materialformName"
                                    >
                                </td>
                                <td><input
                                        type="text"
                                        name=""
                                        id=""
                                        placeholder="单行输入"
                                        v-model="materialforms[index].materialformParameter"
                                    >
                                </td>
                                <td><input
                                        type="text"
                                        name=""
                                        id=""
                                        placeholder="单行输入"
                                        v-model="materialforms[index].materialformNum"
                                        onkeyup="value=value.replace(/[^\d]/g,'')"
                                    >
                                </td>
                                <td><input
                                        type="text"
                                        name=""
                                        id=""
                                        placeholder="单行输入"
                                        v-model="materialforms[index].materialformUnit"
                                    >
                                </td>
                                <td><input
                                        type="text"
                                        name=""
                                        id=""
                                        placeholder="单行输入"
                                        v-model="materialforms[index].materialformRemark"
                                    >
                                </td>
                                <td
                                    class="delete"
                                    style="padding-left:0px;"
                                >
                                    <span @click="deleteItem(index)">删除</span>
                                </td>
                            </tr>
                            <tr>

                                <td
                                    colspan="6"
                                    @click="addItem"
                                    style="cursor: pointer;"
                                >添加一行</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div
            class="row"
            style="margin-top:100px"
        >
            <div class="col-md-1 col-md-offset-4">
                <button
                    type="button"
                    class="btn btn-block btn-primary"
                    @click="getEventMaterial"
                >提交</button>
            </div>
            <div class="col-md-1 col-md-offset-1">
                <button
                    type="button"
                    class="btn btn-block btn-primary"
                    @click="backTo"
                >回退</button>
            </div>
        </div>
    </div>
</template>

<script>
import orderDept from "@/components/common/orderDept.vue";
import utils from "@/utils";

export default {
    props: ["formList"],
    data() {
        console.log(this.formList)
        return {
            materialData: {
                orderId: "",
                personId: "",
                materialDept: "",
                materialPerson: "",
                materialDesc: "",
                materialPhotopath: "",
                materialforms: [],
                excavate: '否',
                orderReason: this.formList.orderReason,
                time: '',
                orderX: '',
                orderY: '',
            },
            check: {
                time: false,
                orderX: false,
                orderY: false,
            },
            uploadUrl: `${window.apiPrefix}/admin/uploadFile`,
            dialogImageUrl: "",
            dialogVisible: false,
            fileList: [],
            materialforms: [
                {
                    materialformName: "",
                    materialformParameter: "",
                    materialformNum: "",
                    materialformRemark: ""
                }
            ],
            valid: {
                materialDept: false,
                materialPerson: false
            },
            paifaData: [],
            selOrderReasonData: [],
            isChecked: false,
        };
    },
    components: {
        orderDept,
    },
    watch: {
        fileList() {
            this.materialData.materialPhotopath = "";
            this.fileList.forEach(item => {
                this.materialData.materialPhotopath += `${item.response.data},`;
            });
            this.materialData.materialPhotopath = this.materialData.materialPhotopath.substr(
                0,
                this.materialData.materialPhotopath.length - 1
            );
            // console.log(this.materialData.materialPhotopath.substr(0, this.materialData.materialPhotopath.length - 1));
        },
        isChecked() {
            if (this.isChecked) {
                this.materialData.excavate = '是'
            }
            else {
                this.materialData.excavate = '否'
            }
        }
    },
    mounted() {
        this.getEventWorkinfo();
        this.getSelOrderReason()
    },
    methods: {
        setGeomString(geom) {
            // console.log(geom);
            this.materialData.orderX = geom.x;
            this.materialData.orderY = geom.y;
        },
        showMap() {
            window.vm = this;
            window.open("/getgeom.html?type=point&x=" + this.orderX + "&y=" + this.orderY);
        },
        selectDate1() {
            $("#datepicker1")
                .datetimepicker({
                    autoclose: true,
                    format: "yyyy-mm-dd hh:ii:ss"
                })
                .on("changeDate", ev => {
                    this.materialData.time = ev.target.value;
                });
        },
        changeCheck() {
            this.isChecked = !this.isChecked
        },
        handleRemove(file, fileList) {
            this.fileList = fileList;
            // console.log(file, fileList);
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        handleSuccess(response, file, fileList) {
            this.fileList = fileList;
        },
        addItem: function () {
            let addData = {
                materialformName: "",
                materialformParameter: "",
                materialformNum: "",
                materialformRemark: ""
            };
            this.materialforms.push(addData);
        },
        deleteItem: function (index) {
            this.materialforms.splice(index, 1);
        },
        getEventMaterial() {
            this.materialData.orderId = this.formList.orderId;
            // console.log(this.materialData);
            this.materialData.materialforms = JSON.stringify(
                this.materialforms
            );
            if (this.materialData.time == "") {
                this.check.time = true;
            } else {
                // console.log(this.materialData);
                this.$api.ticket.list.eventMaterial(this.materialData).then(res => {
                    if (res.success) {
                        console.log(this.materialData);
                        this.formList.orderStatus = 2;
                        this.$$message({
                            message: "恭喜您，确认成功！",
                            type: "success"
                        });
                        this.$parent.$refs.detailmsgComp.getEventWorkinfo();
                        this.$parent.$refs.detailmsgComp.$parent.getSelEventId();
                        this.$emit("isActive");
                    }
                    else {
                        this.$$message({
                            message: res.msg,
                            type: "error"
                        });
                    }
                });
            }
        },
        getEventWorkinfo() {
            this.$api.ticket.list
                .eventWorkinfo({
                    orderId: this.formList.orderId
                })
                .then(res => {
                    if (res.success) {
                        // console.log(res);peopleId
                        this.paifaData = res.data.distributeList;
                        this.materialData.materialDept =
                            res.data.distributeList[0].distributeDept;
                        this.materialData.materialPerson =
                            res.data.workList[0].sysPersonName;
                        this.materialData.personId =
                            res.data.workList[0].personId;
                        // console.log(this.materialData);
                    }
                });
        },
        getDate() {
            return utils.getDate();
        },
        getSelOrderReason() {
            this.$api.ticket.list.selOrderReason().then(res => {
                if (res.success) {
                    this.selOrderReasonData = res.data
                    // console.log(res.data);
                }
            });
        },
        backTo(){
            this.$api.ticket.list.back({
                orderId: this.formList.orderId
            }).then(res => {
                if (res.success) {
                    this.formList.orderStatus = 0;
                    this.$$message({
                        message: "恭喜您，回退成功！",
                        type: "success"
                    });
                }
            });
        }
    }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.content {
    .row {
        margin: 17px 0;
    }
    .col-md-1 {
        text-align: right;
        height: 32px;
        line-height: 32px;
    }
    .col-md-5 {
        height: 32px;
        line-height: 32px;
        color: #b2afb3;
    }
    select {
        width: 200px;
        height: 32px;
        line-height: 32px;
        padding-top: 4px;
        color: #b2afb3;
        border-radius: 5px;
    }
    img {
        width: 90px;
        height: 90px;
        margin-right: 45px;
    }
    thead {
        th {
            text-align: center;
        }
    }
    tbody {
        tr {
            td {
                padding: 0;
                height: 31px;
                line-height: 31px;
            }
            td {
                input {
                    width: 100%;
                    height: 32px;
                    line-height: 32px;
                    border: 0px;
                    outline: none;
                    text-align: center;
                }
            }
            .delete {
                span {
                    display: block;
                    line-height: 31px;
                    height: 31px;
                    text-align: center;
                    cursor: pointer;
                }
            }
        }
    }
    .control-label {
        padding: 0;
        text-align: right;
        height: 32px;
        line-height: 32px;
    }
}
.formOrder {
    line-height: 34px;
    height: 34px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
</style>
<style rel="stylesheet/scss" lang="scss">
.hiddenIcon {
    .el-upload--picture-card {
        display: none;
    }
}
input[name="file"] {
    display: none;
}
</style>